<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>猜数字游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
            text-align: center;
        }

        .game-container {
            background-color: #f5f5f5;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        input {
            padding: 8px;
            margin: 10px;
            width: 100px;
        }

        button {
            padding: 8px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #45a049;
        }

        #message {
            margin: 20px;
            padding: 10px;
            min-height: 30px;
        }

        .history {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            max-height: 200px;
            overflow-y: auto;
        }

        .success {
            color: #2ecc71;
            font-weight: bold;
        }

        .error {
            color: #e74c3c;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h2>猜数字游戏（1-100）</h2>
        <div id="message">请输入1到100之间的数字：</div>
        <input type="number" id="guessInput" min="1" max="100">
        <button onclick="checkGuess()">提交猜测</button>
        <button onclick="newGame()" id="newGameBtn" style="display: none;">新游戏</button>
        <div class="history">
            <h3>猜测记录：</h3>
            <div id="historyList"></div>
        </div>
    </div>

    <script>
        let targetNumber;
        let attempts = 0;
        const maxNumber = 100;

        // 初始化游戏
        function initGame() {
            targetNumber = Math.floor(Math.random() * maxNumber) + 1;
            attempts = 0;
            document.getElementById('historyList').innerHTML = '';
            document.getElementById('newGameBtn').style.display = 'none';
            document.getElementById('message').className = '';
            document.getElementById('message').textContent = '请输入1到100之间的数字：';
            document.getElementById('guessInput').value = '';
        }

        // 检查猜测结果
        function checkGuess() {
            const input = document.getElementById('guessInput');
            const message = document.getElementById('message');
            const guess = parseInt(input.value);
            
            if (isNaN(guess) || guess < 1 || guess > 100) {
                message.className = 'error';
                message.textContent = '请输入1到100之间的有效数字！';
                return;
            }

            attempts++;
            const historyList = document.getElementById('historyList');
            const listItem = document.createElement('div');
            
            if (guess === targetNumber) {
                message.className = 'success';
                message.textContent = `恭喜！你在 ${attempts} 次尝试后猜中了数字 ${targetNumber}！`;
                document.getElementById('newGameBtn').style.display = 'inline-block';
                listItem.textContent = `${guess} ✔️ (第 ${attempts} 次)`;
                listItem.style.color = '#2ecc71';
            } else {
                const hint = guess > targetNumber ? '大了' : '小了';
                message.className = '';
                message.textContent = `猜错了！你猜的数字${hint}，请继续尝试`;
                listItem.textContent = `${guess} → ${hint} (第 ${attempts} 次)`;
                listItem.style.color = '#e74c3c';
            }

            historyList.prepend(listItem);
            input.value = '';
        }

        // 开始新游戏
        function newGame() {
            initGame();
        }

        // 初始化首次游戏
        initGame();
    </script>
</body>
</html>